<template>
  <div>
    <h1>App Bars (应用栏)</h1>
    <p>
      v-app-bar
      组件对于任何图形用户界面（GUI）都至关重要，因为它通常是站点导航的主要来源。
      App-bar组件与&lt;a href=“/components/navigation
      drawers”&gt;v-navigation-drawer 配合使用，可以在应用程序中提供站点导航。
    </p>
    <br />
    <h2>常用属性</h2>
    <p>v-app-bar 组件用于应用程序范围内的操作和信息。</p>
    <ul class="font-weight-black">
      <li>DENSE : 缩窄模式</li>
      <li>FLAT : 平铺模式</li>
      <li>PROMINENT : 凸显加宽模式</li>
    </ul>
    <br />
    <h2>子组件</h2>
    <br />
    <h3>v-app-bar-nav-icon</h3>
    <p>
      专门为与 v-toolbar 和 v-app-bar
      一起使用而创建的样式化图标按钮组件。其实就是默认的三横图标。
      在工具栏的左侧显示为汉堡菜单，它通常用于控制导航抽屉的状态。 default
      插槽可以用于自定义此组件的图标和功能。 这是一个 函数式 组件。
    </p>

    <br />
    <h3>v-app-bar-title</h3>
    <p>
      修改过的 v-toolbar-title 组件 ，用于配合 shrink-on-scroll 属性使用。
      在小屏幕上，v-toolbar-title 将被截断(见 issue
      #12514)，但这个组件在展开时使用了绝对定位使其内容可见。
      我们不建议您在没有使用 shrink-on-scroll 属性时使用 v-app-bar-title
      组件。确实是因为向此组件添加了resize事件，并进行了很多额外的计算。
    </p>
    <br />

    <h2>示例</h2>
    <br />
    <h3>可折叠栏</h3>
    <p>
      使用 collapse 和 collapse-on-scroll
      属性，您可以轻松控制用户与工具栏交互时工具栏的状态。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        :collapse="!collapseOnScroll"
        :collapse-on-scroll="collapseOnScroll"
        absolute
        color="deep-purple accent-4"
        dark
        scroll-target="#scrolling-techniques-6"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Collapsing Bar</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-checkbox
          v-model="collapseOnScroll"
          color="white"
          hide-details
        ></v-checkbox>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-6"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px"></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>紧凑</h3>
    <p>您可以使 app-bar 更加紧凑。 紧凑应用栏的高度低于普通应用栏。</p>
    <div>
      <v-app-bar color="deep-purple accent-4" dense dark>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-menu left bottom>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon v-bind="attrs" v-on="on">
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>

          <v-list>
            <v-list-item v-for="n in 5" :key="n" @click="() => {}">
              <v-list-item-title>Option {{ n }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-app-bar>
    </div>
    <br />

    <h3>滚动时的高度(z轴)</h3>
    <p>
      当使用 elevate-on-scroll prop时， v-app-bar 将保持在 0dp
      的高度，直到用户开始滚动为止。 一旦开始滚动，bar的高度上升到4dp。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="white"
        elevate-on-scroll
        scroll-target="#scrolling-techniques-7"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-7"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1500px"> </v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>滚动时淡入淡出图像</h3>
    <p>
      实现 v-app-bar 的背景图像淡入淡出。 可以使用 fade-img-on-scroll 属性。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="#6A76AB"
        dark
        shrink-on-scroll
        prominent
        src="../assets/bg-2.jpg"
        fade-img-on-scroll
        scroll-target="#scrolling-techniques-3"
      >
        <template v-slot:img="{ props }">
          <v-img
            v-bind="props"
            gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
          ></v-img>
        </template>

        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-app-bar-title>Title</v-app-bar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
        <template v-slot:extension>
          <v-tabs align-with-title>
            <v-tab>Tab 1</v-tab>
            <v-tab>Tab 2</v-tab>
            <v-tab>Tab 3</v-tab>
          </v-tabs>
        </template>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-3"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px"></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>滚动时隐藏</h3>
    <p>实现 v-app-bar 的滚动时隐藏。 可以使用 hide-on-scroll 属性。</p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="teal lighten-3"
        dark
        hide-on-scroll
        prominent
        scroll-target="#scrolling-techniques-4"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-4"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px"></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>图像</h3>
    <p>
      v-app-bar 可以包含背景图像。 您可以通过 src prop设置。 如果您需要自定义
      v-img 属性，应用栏将为您提供一个 img
      插槽。shrink-on-scroll是滚动时缩小的意思。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="#fcb69f"
        dark
        shrink-on-scroll
        src="../assets/logo.svg"
        scroll-target="#scrolling-techniques-2"
      >
        <template v-slot:img="{ props }">
          <v-img
            v-bind="props"
            gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
          ></v-img>
        </template>

        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-app-bar-title>Title</v-app-bar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-2"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px"
          ><v-img src="../assets/logo.svg"></v-img
        ></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>滚动反转</h3>
    <p>
      当使用 inverted-scroll 属性时，应用栏将隐藏直到用户滚动超过指定的阈值。
      一旦设置阈值， v-app-bar 将继续显示直到用户滚动超过阈值。 如果没有
      scroll-threshold 值，则将使用默认值 0
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="primary"
        dark
        inverted-scroll
        scroll-target="#scrolling-techniques-8"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-8"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1500px"> </v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>突出</h3>
    <p>
      一个带有 prominent prop 的 v-app-bar 可以被设置为随着用户滚动而收缩。
      当用户滚动浏览内容时，这提供了一个平滑的过渡，以减少视觉空间占用。
      收缩高度有dense（紧密，48px）和short（短，56px）两种选择。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="indigo darken-2"
        dark
        shrink-on-scroll
        prominent
        scroll-target="#scrolling-techniques"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-app-bar-title>Title</v-app-bar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px"></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>滚动阈值</h3>
    <p>
      v-app-bar 可以有滚动阈值。 只有在对 scroll-threshold
      属性定义像素之后，它才会开始对滚动做出反应。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="#43a047"
        dark
        shrink-on-scroll
        prominent
        src="../assets/bg-2.jpg"
        fade-img-on-scroll
        scroll-target="#scrolling-techniques-5"
        scroll-threshold="500"
      >
        <template v-slot:img="{ props }">
          <v-img
            v-bind="props"
            gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)"
          ></v-img>
        </template>

        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-app-bar-title>Title</v-app-bar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-5"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1500px"></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h2>其他</h2>
    <br />
    <h3>菜单</h3>
    <p>
      您可以通过添加 VMenu 来轻松地扩展应用栏的功能。
      单击最后一个图标以查看其运行情况。
    </p>
    <v-card class="overflow-hidden">
      <v-app-bar
        absolute
        color="#6A76AB"
        dark
        shrink-on-scroll
        prominent
        src="../assets/bg-2.jpg"
        fade-img-on-scroll
        scroll-target="#scrolling-techniques-4"
      >
        <template v-slot:img="{ props }">
          <v-img
            v-bind="props"
            gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
          ></v-img>
        </template>

        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-menu bottom left>
          <template v-slot:activator="{ on, attrs }">
            <v-btn icon color="yellow" v-bind="attrs" v-on="on">
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </template>

          <v-list>
            <v-list-item v-for="(item, i) in menuitems" :key="i">
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

        <template v-slot:extension>
          <v-tabs align-with-title>
            <v-tab>Tab 1</v-tab>
            <v-tab>Tab 2</v-tab>
            <v-tab>Tab 3</v-tab>
          </v-tabs>
        </template>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-4"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px"></v-container>
      </v-sheet>
    </v-card>
    <br />

    <h3>切换导航抽屉</h3>
    <p>
      使用函数式组件v-app-bar-nav-icon可以切换其他组件的状态，例如
      v-navigation-drawer 。
    </p>
    <v-card class="mx-auto overflow-hidden" height="400">
      <v-app-bar color="deep-purple" dark>
        <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>
      </v-app-bar>

      <v-navigation-drawer v-model="drawer" absolute temporary>
        <v-list nav dense>
          <v-list-item-group
            v-model="group"
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-home</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Home</v-list-item-title>
            </v-list-item>

            <v-list-item>
              <v-list-item-icon>
                <v-icon>mdi-account</v-icon>
              </v-list-item-icon>
              <v-list-item-title>Account</v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </v-card>
    <br />
  </div>
</template>

<script>
export default {
  name: "AppBars",
  data() {
    return {
      collapseOnScroll: true,
      menuitems: [
        { title: "Click Me" },
        { title: "Click Me" },
        { title: "Click Me" },
        { title: "Click Me 2" },
      ],
      drawer: false,
      group: null,
    };
  },
};
</script>